(Day 07) Creating CRUD with Laravel, Mysql, Bootstrap part III

第 12 屆 iThome 鐵人賽

DAY 7

Modern Web

用30days 了解web系列第 7 篇

12th鐵人賽

alfredkosasihh

團隊imac_web_Sr

2020-09-20 21:35:17

785 瀏覽

分享至

today's articles are still about CRUD, but todays will mainly talk about Updates part or known as Edit.

Edit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-4"></div> 
            <div class="col-4" style="top:180px">
                <form action="/updates/{{$data->id}}" method="POST">
                    @csrf
                    <div class="form-group">
                    <label for="exampleInputEmail1">Name</label>
                    <input type="text" class="form-control" name="user_name" value="{{$data->name}}">
                    </div>
                    <div class="form-group">
                    <label for="exampleInputPassword1">Email</label>
                    <input type="email" class="form-control" name="user_email" value="{{$data->email}}">
                    </div>
                    <div class="form-group">
                    <label for="exampleInputPassword1">Telephone</label>
                    <input type="tel" class="form-control" name="user_phone" value="{{$data->phone}}">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>    
            </div> 
            <div class="col-4"></div>
        </div>
    </div>
</body>
</html>

explanation
when the edit button is clicked. we actually go to localhost:8000/edit/{id}.
I use get method and obtain the data from database using where function

the value of Name, Email, Telephone is automatically loaded into HTML form.
after we edited the value inside and click the submit button, this button will take you to /update/{id} and once again go to HomeController and call the function called updates.